<template>
    <div class="app-container">
        <!-- 查询 -->
        <el-card class="box-card">
            <div class="filter-container">
                <el-row :gutter="20">
                    <el-col :span="18">
                        <el-form :inline="true" class="search-form">
                            <el-form-item label="负责人名称：">
                                <el-input v-model="searchForm.user_name" class="marginBottom" placeholder="请输入名称"
                                    clearable />
                            </el-form-item>
                            <el-form-item label="负责人手机号：">
                                <el-input v-model="searchForm.user_cellphone" class="marginBottom" placeholder="请输入名称"
                                    clearable />
                            </el-form-item>
                            <el-form-item label="法人姓名：">
                                <el-input v-model="searchForm.corporate_name" class="marginBottom" placeholder="请输入名称"
                                    clearable />
                            </el-form-item>

                            <el-form-item label="审核状态：">
                                <el-select v-model="searchForm.apply_status" placeholder="请选择审核状态">
                                    <el-option v-for="item in CateList" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item>
                                <el-button size="small" type="primary" icon="el-icon-search"
                                    @click="getListWay">查询</el-button>
                                <el-button size="small" type="primary" icon="el-icon-refresh"
                                    @click="resettingWay">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card class="grouping box-card" style="margin-top: 20px">
            <div class="marginBottom">
                <el-row :gutter="20">
                    <el-col>
                        <el-button type="primary" size="small" @click="addDictionaryWay">添加商户分类</el-button>
                    </el-col>
                </el-row>
            </div>
            <el-row :gutter="20">
                <el-col>
                    <el-table v-loading="loading" :header-cell-style="{
                        'background-color': '#f3f8fe',
                        color: '#606266',
                        height: '50px',
                    }" highlight-current-row :data="dictionaryList" style="width: 100%">
                        <el-table-column prop="id" align="center" label="ID"> </el-table-column>
                        <el-table-column prop="user_name" align="center" label="负责人名称"> </el-table-column>
                        <el-table-column prop="user_cellphone" align="center" label="负责人电话"></el-table-column>
                        <el-table-column prop="user_address" align="center" label="负责人常驻地址"></el-table-column>
                        <el-table-column prop="email" align="center" label="电子邮箱"></el-table-column>
                        <el-table-column prop="business_license_no" align="center" label="营业执照注册号"> </el-table-column>
                        <el-table-column prop="corporate_name" align="center" label="法人姓名"> </el-table-column>

                        <el-table-column prop="address" align="center" label="联系地址"> </el-table-column>
                        <el-table-column prop="business_scope" align="center" label="执照经营范围"> </el-table-column>
                        <el-table-column prop="business_switchShowWayexpiration_time" align="center" label="营业执照到期时间">
                        </el-table-column>
                        <el-table-column prop="apply_text" align="center" label="审核状态"> </el-table-column>
                        <el-table-column prop="remark" align="center" label="备注"> </el-table-column>

                        <el-table-column align="center" prop="status" label="状态">
                            <template slot-scope="scope">

                                <el-switch @change="switchShowWay(scope.row)" v-model="scope.row.status" :active-value="1"
                                    :inactive-value="2">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" align="center" width="180" prop="address" label="操作">
                            <template slot-scope="scope">
                                <el-popconfirm title="确定拒绝吗？" @confirm="delDictionaryWay(scope.row, 3)">
                                    <el-button type="text" size="mini" slot="reference"> 拒绝
                                    </el-button>
                                </el-popconfirm>
                                <el-button title="确定同意吗？" style="margin-left: 10px;" type="text" size="mini"
                                    @click="delDictionaryWay(scope.row, 2)">
                                    同意
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table></el-col>
            </el-row>
            <el-row class="marginTop" style="text-align: right">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="searchForm.page" :page-sizes="[10, 20, 30, 40]" :page-size="searchForm.count"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </el-row>
        </el-card>


        <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="isShopRebark" width="700px"
            @close="closeDialogdictionary">
            <el-row :gutter="20">
                <el-form :model="dictionaryForm" status-icon :rules="rules" ref="dictionaryForm" label-width="110px"
                    class="demo-ruleForm">
                    <el-col :span="22">
                        <el-form-item label="备注" prop="name">
                            <el-input type="textarea" placeholder="请输入备注" v-model="remark" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form>

            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="btnLoading" @click="isShopRebark = false"> 取 消 </el-button>
                <el-button :loading="btnLoading" type="primary" @click="submitShopRebark('dictionaryForm')">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
import { authStatus, addCateList, editCateList, delCateList, authAudit, getCatedDetail, authlst } from "@/api/merchant/index"
import { getDictionaryValueList } from "@/api/admin/dictionary"
export default {
    data() {
        return {
            title: '添加商户分类',
            isShopRebark: false,
            shopDetatil: {},
            remark: '',

            // (1.审核中,2.已通过,3.已拒绝)
            CateList: [
                {
                    label: '审核中',
                    value: 1
                },
                {
                    label: '已通过',
                    value: 2
                },
                {
                    label: '已拒绝',
                    value: 3
                }
            ],
            loading: false,
            btnLoading: false,
            dialogdictionary: false,
            searchForm: {
                user_name: '',
                user_cellphone: '',
                corporate_name: '',
                apply_status: '',
                page: 1,
                count: 10,
            },
            dictionaryForm: {
                id: '',
                name: '',
                demand: '',
                security_deposit: '',
                lnstructions: '',
                remark: '',
            },
            options: [
                {
                    label: '启用',
                    value: 1,
                },
                {
                    label: '禁用',
                    value: 2,
                }
            ],
            dictionaryList: [],
            total: 0,
            rules: {
                name: [
                    {
                        required: true, validator: (rule, value, callback) => {
                            if (!value) {
                                return callback(new Error("名称不能为空"));
                            }
                            callback()
                        }, trigger: "blur"
                    },
                ],
                security_deposit: [
                    {
                        required: true, validator: (rule, value, callback) => {
                            if (!value) {
                                return callback(new Error("请输入保证金"));
                            }
                            callback()
                        }, trigger: "blur"
                    },
                ],
                demand: [
                    {
                        required: true, validator: (rule, value, callback) => {
                            if (!value) {
                                return callback(new Error("请输入类型要求"));
                            }
                            callback()
                        }, trigger: "blur"
                    },
                ],
                lnstructions: [
                    {
                        required: true, validator: (rule, value, callback) => {
                            if (!value) {
                                return callback(new Error("请输入说明"));
                            }
                            callback()
                        }, trigger: "blur"
                    },
                ],
                status: [
                    {
                        required: true, validator: (rule, value, callback) => {
                            if (!value) {
                                return callback(new Error("请选择状态"));
                            }
                            callback()
                        }, trigger: "blur"
                    },
                ],

            }
        }
    },
    created() {
        this.getListWay()
    },
    methods: {
        // 查询商户分类
        getListWay() {
            this.loading = true
            authlst(this.searchForm).then((res) => {
                this.loading = false;

                if (res.code !== 200) {
                    this.$messages.error(res.msg);
                    return
                }
                this.total = res.data.total
                this.dictionaryList = res.data.list;
                this.dictionaryList.map((val) => {
                    if (val.apply_status == 1) {
                        val.apply_text = '待审核'
                    } else if (val.apply_status == 2) {
                        val.apply_text = '审核通过'
                    } else if (val.apply_status == 3) {
                        val.apply_text = '审核未通过'
                    }
                })
            }).catch(() => {
                this.loading = false
            })
        },
        // 商户分类重置搜索
        resettingWay() {
            this.searchForm = {
                name: '',
                page: 1,
                count: 10,
            }
            this.getListWay()
        },
        switchShowWay(val) {
            this.loading = true


            authStatus({ id: val.id, status: val.status }).then((res) => {
                if (res.code == 200) {
                    this.$messages.success('修改成功')
                    this.getListWay()
                } else {
                    this.$messages.error(res)
                }
            }).catch(() => {
                this.loading = false
            })
        },
        // 添加商户分类
        addDictionaryWay() {
            this.title = '添加商户分类'
            this.dialogdictionary = true
        },
        // 添加修改提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.btnLoading = true
                    if (!this.dictionaryForm.id) {
                        addCateList(this.dictionaryForm).then((res) => {
                            this.btnLoading = false
                            if (res.code !== 200) {
                                this.$messages.error(res.msg);
                                return
                            }
                            this.closeDialogdictionary()
                            this.getListWay()
                        }).catch(() => {
                            this.btnLoading = false
                        })
                    } else {
                        editCateList(this.dictionaryForm).then((res) => {
                            this.btnLoading = false
                            if (res.code !== 200) {
                                this.$messages.error(res.msg);
                                return
                            }
                            this.closeDialogdictionary()
                            this.getListWay()
                        }).catch(() => {
                            this.btnLoading = false
                        })
                    }

                }
            })
        },
        // 添加修挂弹框关闭
        closeDialogdictionary() {
            this.$refs.dictionaryForm.resetFields()
            this.dialogdictionary = false
            this.dictionaryForm = {
                id: '',
                name: '',
                demand: '',
                security_deposit: '',
                lnstructions: '',
                remark: '',
            }

        },
        // 删除 商户分类
        delDictionaryWay(row, index) {
            this.isShopRebark = true;
            this.shopDetatil = row;
            this.shopDetatil.index = index;
        },
        // 商户认证审核
        submitShopRebark() {
            if (!this.remark) {
                this.$messages.success('备注为空')
                return
            }
            authAudit({ id: this.shopDetatil.id, apply_status: this.shopDetatil.index, remark: this.remark }).then((res) => {
                if (res.code == 200) {
                    this.$messages.success('操作成功')
                    this.isShopRebark = false;
                    this.getListWay()
                } else {
                    this.$messages.error(res.msg)
                }
            })
        },
        // 修改 商户分类
        putDictionaryWay(row) {
            this.title = '修改商户分类'
            this.dialogdictionary = true
            this.btnLoading = true
            getCatedDetail({ id: row.id }).then((res) => {
                this.btnLoading = false
                this.dictionaryForm = res.data
            }).catch(() => {
                this.$messages.error('获取数据失败,请重试');
                this.btnLoading = false
                this.dialogdictionary = false
            })

        },
        // 商户分类切换分页
        handleCurrentChange(val) {
            this.searchForm.page = val
            this.getListWay()
        },
        // 商户分类切换每页数量
        handleSizeChange(val) {
            this.searchForm.count = val
            this.getListWay()
        },
    }
}
</script>

<style></style>